<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <style>
    body {
      width: 480px;
      height: auto;
      padding: 12px;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      margin: 0;
      background: #e0e5ec;
    }

    .container {
      display: flex;
      gap: 12px;
      min-height: 300px;
      align-items: stretch;
    }

    .left-panel {
      width: 160px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .right-panel {
      flex: 1;
      max-width: 300px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      min-height: 0;
      width: 100%;
    }

    .grid-item {
      background: #e0e5ec;
      padding: 10px;
      border-radius: 10px;
      text-align: center;
      box-shadow: inset 3px 3px 7px #a3b1c6,
                  inset -3px -3px 7px #ffffff;
      cursor: pointer;
      position: relative;
    }
    .grid-label {
      font-size: 12px;
      color: #6d7f97;
      margin-bottom: 6px;
      font-weight: 500;
    }
    .grid-value {
      font-size: 14px;
      font-weight: 600;
      color: #2d3436;
      text-shadow: 1px 1px 1px #ffffff;
    }
    .update-time {
      font-size: 11px;
      color: #6d7f97;
    }
    .button {
      width: 100%;
      padding: 8px;
      border: none;
      border-radius: 8px;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s;
      background: #e0e5ec;
      color: #2d3436;
      box-shadow: 5px 5px 10px #a3b1c6,
                  -5px -5px 10px #ffffff;
      position: relative;
    }
    .button:active {
      box-shadow: inset 3px 3px 7px #a3b1c6,
                  inset -3px -3px 7px #ffffff;
      transform: translateY(1px);
    }
    #startButton:hover {
      color: #1a73e8;
    }
    #startButton:disabled {
      color: #a3b1c6;
      cursor: not-allowed;
    }
    #stopButton:hover {
      color: #ea4335;
    }
    #refreshPoints:hover {
      color: #34a853;
    }
    #status {
      padding: 10px;
      border-radius: 12px;
      background: #e0e5ec;
      box-shadow: inset 2px 2px 5px #a3b1c6,
                  inset -2px -2px 5px #ffffff;
      text-align: center;
      font-size: 13px;
      color: #2d3436;
      flex-shrink: 0;
      width: calc(100% - 20px);
    }
    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    #refreshPoints.refreshing {
      color: transparent;
      min-width: 80px;
    }
    #refreshPoints.refreshing::after {
      content: "刷新中...";
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      color: #1a73e8;
      animation: pulse 1.5s infinite;
      white-space: nowrap;
    }
    @keyframes pulse {
      0% { opacity: 1; }
      50% { opacity: 0.5; }
      100% { opacity: 1; }
    }
    .points-link {
      text-decoration: none;
      color: inherit;
      display: block;
      transition: all 0.2s;
    }
    .points-link:hover .grid-value {
      color: #1a73e8;
    }
    .points-link:hover .grid-label {
      color: #1a73e8;
    }
    .level-badge {
      width: 35px;
      height: 35px;
      background: #e0e5ec;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      font-weight: 600;
      color: #1a73e8;
      box-shadow: 3px 3px 6px #a3b1c6,
                  -3px -3px 6px #ffffff;
      cursor: help;
      transition: all 0.3s ease;
      position: relative;
      z-index: 2;
    }
    .level-badge::after {
      content: attr(data-tooltip);
      position: absolute;
      left: calc(100% + 10px);
      top: 50%;
      transform: translateY(-50%) translateX(-10px);
      padding: 8px;
      background: rgba(0, 0, 0, 0.8);
      color: white;
      border-radius: 6px;
      font-size: 11px;
      white-space: pre-line;
      visibility: hidden;
      opacity: 0;
      transition: all 0.3s ease;
      pointer-events: none;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
      text-align: left;
      width: max-content;
      max-width: 200px;
      z-index: 9999;
    }
    .level-badge:hover::after {
      visibility: visible;
      opacity: 1;
      transform: translateY(-50%) translateX(0);
    }
    .level-badge:hover {
      transform: scale(1.1);
      box-shadow: 4px 4px 8px #a3b1c6,
                  -4px -4px 8px #ffffff;
    }
    .search-words-container {
      flex-grow: 1;
      background: #e0e5ec;
      border-radius: 12px;
      box-shadow: 8px 8px 15px #a3b1c6,
                  -8px -8px 15px #ffffff;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      min-height: 0;
      max-height: 250px;
      width: 100%;
    }

    .search-words-title {
      padding: 10px;
      background: #d1d9e6;
      color: #2d3436;
      font-weight: 600;
      border-bottom: 1px solid #c2cad6;
    }

    .search-words-list {
      flex: 1;
      overflow-y: auto;
      padding: 8px;
      min-height: 0;
      max-height: 200px;
      width: calc(100% - 16px);
    }

    .search-word-item {
      padding: 10px;
      border-radius: 8px;
      margin-bottom: 4px;
      transition: all 0.3s;
      background: #e0e5ec;
      box-shadow: inset 2px 2px 5px #a3b1c6,
                  inset -2px -2px 5px #ffffff;
      width: calc(100% - 20px);
    }

    .search-word-item.active {
      background: #e3f2fd;
      color: #1976d2;
      font-weight: bold;
      box-shadow: 3px 3px 6px #a3b1c6,
                  -3px -3px 6px #ffffff;
    }

    .search-word-item.completed {
      color: #888;
      text-decoration: line-through;
    }

    .rewards-info {
      display: flex;
      flex-direction: column;
      gap: 8px;
      background: #e0e5ec;
      padding: 12px;
      border-radius: 12px;
      box-shadow: 8px 8px 15px #a3b1c6,
                  -8px -8px 15px #ffffff;
    }

    .level-refresh {
      display: flex;
      gap: 8px;
      align-items: center;
      padding: 0;
      border-radius: 12px;
      position: relative;
      z-index: 1;
    }

    .level-refresh .button {
      flex: 1;
    }

    .search-controls {
      display: flex;
      gap: 8px;
      flex-shrink: 0;
      width: 100%;
    }

    .search-controls .button {
      flex: 1;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="left-panel">
      <div class="rewards-info">
        <div class="grid-item">
          <a href="https://rewards.bing.com/pointsbreakdown" target="_blank" class="points-link">
            <div class="grid-label">总积分</div>
            <div class="grid-value" id="totalPoints">加载中...</div>
          </a>
        </div>
        <div class="grid-item">
          <div class="grid-label">今日积分</div>
          <div class="grid-value" id="dailyPoints">加载中...</div>
        </div>
        <div class="grid-item">
          <div class="grid-label">电脑搜索</div>
          <div class="grid-value" id="pcPoints">加载中...</div>
        </div>
        <div class="grid-item">
          <div class="grid-label">更新时间</div>
          <div class="grid-value update-time" id="updateTime">加载中...</div>
        </div>
      </div>
      
      <div class="level-refresh">
        <div class="level-badge" id="levelBadge" data-tooltip="每月需获得500分以上才能保持等级2">Level</div>
        <button id="refreshPoints" class="button">刷新积分</button>
      </div>
    </div>
    
    <div class="right-panel">
      <div class="search-controls">
        <button id="startButton" class="button">开始搜索</button>
        <button id="stopButton" class="button">停止搜索</button>
      </div>
      
      <div id="status"></div>
      
      <div class="search-words-container">
        <div class="search-words-title">待搜索关键词</div>
        <div class="search-words-list" id="searchWordsList"></div>
      </div>
    </div>
  </div>
  <script src="popup.js"></script>
</body>
</html> 